<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>INCAKE|购物篮</title>
	<link rel="stylesheet" type="text/css" href="/css/base.css">
	<link rel="stylesheet" type="text/css" href="/css/cart.css">
	<script src="/lib/requirejs/require.js" data-main="/js/cart"></script>
	<style>
		.item{
			position: relative;
			width: 100%;
			padding-top: 30px;
			border-bottom: 1px dotted #b3a3a3;
			color: #505050;
		}
		.item-content{
			position: relative;
			width: 100%;
			padding-bottom: 30px;
			zoom: 1;
		}	
		.item-content::after{
			display: block;
			content: "";
			clear: both;
		}
		.item-content>div{
			float: left;
			height: 120px;
		}
		.item-content>div p{
			line-height: 24px;
		}
		.center{
			position: relative;
			height: 100%;
		}
		.center .center-child{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			display: table;
			text-align: center;
		}
		.item-content .c-ckbox{
			position: relative;
			width: 50px;
		}	
		.item-content .c-ckbox .ck-btn{
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 32px;
			height: 32px;
			margin: -16px 0 0 -16px;
			border-radius: 50%;
			background-image: url(/imgs/h-checkall.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
		}
		.item-content .c-product{
			width: 310px;
			zoom: 1;
		}
		.item-content .c-product::after{
			display: block;
			content: "";
			clear: both;
		}
		.item-content .c-product .img{
			display: block;
			float: left;
			width: 120px;
			height: 120px;
			overflow: hidden;
		}
		.item-content .c-product .img img{
			width: 100%;
		}
		.item-content .c-product .p-name{
			float: right;
			width: 150px;
			height: 100%;
		}
    	.item-content .c-product .p-name p{
    		text-align: left;
    	}
    	.item-content .c-product .p-name .cn{
    		line-height: 24px;
    	}
    	.item-content .c-product .p-name .en{
    		font-size: 12px;
    		line-height: 18px;
    	}
		.item-content .c-attr{
			width: 140px;
		}
		.item-content .c-amount{
			position: relative;
			width: 200px;
		}
		.item-content .c-amount .content{
			position: absolute;
			top: 50%;
		    left: 50%;
		    width: 160px;
		    height: 32px;
		    margin: -16px 0 0 -80px;
		    zoom: 1;
		}
		.content::after{
			display: block;
			content: "";
			clear: both;
		}
		.item-content .c-amount .content .btn{
			display: block;
		    position: absolute;
		    top: 3px;
		    width: 25px;
		    height: 25px;
		    background-repeat: no-repeat;
		    background-size: cover;
		    background-position: 50%;
		    border-radius: 50%;
		}
		.item-content .c-amount .content .sub{
			left: 10px;
    		background-image: url(/imgs/sub-btn.png);
		}
		.item-content .c-amount .content .add{
			right: 10px;
    		background-image: url(/imgs/add-btn.png);
		}
		.item-content .c-amount .content .amount-num{
			width: 70px;
		    height: 30px;
		    margin: 0 auto;
		    border: 1px solid #b4b4b4;
		    border-radius: 2px;
		}
		.item-content .c-amount .content .amount-num .amount-text{
			border: none;
		    outline: none;
		    width: 70px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		}
		.item-content .c-weight{
			width: 110px;
		}
		.item-content .c-price{
			width: 120px;
		}
		.item-content .c-discount{
			width: 140px;
		}
		.item-content .c-delete{
			width: 90px;
		}
		.item-content .c-delete .del-btn{
			color: #4682be;
		}
		.item-content .c-delete .del-btn:hover{
			text-decoration: underline;
		}
		.checked{
			background-image: url(/imgs/checked.png)!important;
		}
		.all-checked{
			background-image: url(/imgs/checked.png)!important;
		}
	</style>
</head>
<body>
	<header></header>
	<div class="cart-page">
		<div class="page-container">
			<div class="cart-title">
				<div class="text">
					<h2>SHOPPING BASKET</h2>
					<p><span>购物篮</span></p>
				</div>
				<div class="pay-tip">
					<div class="step step1"><p>我的购物篮</p></div>
					<div class="step step2"><p>填写和提交订单</p></div>
					<div class="step step3"><p>成功提交订单</p></div>
					<div class="line line1"></div>
					<div class="line line2"></div>
				</div>
			</div>
			<div class="product-container">
				<div class="list-wrapper">
					<p class="list-header">
						<span class="h-checkall checkall-btn"><i>全选</i></span>
						<span class="h-product">商品</span>
						<span class="h-attr">属性</span>
						<span class="h-amount">数量</span>
						<span class="h-spec">规格</span>
						<span class="h-price">单价</span>
						<span class="h-privilege">优惠</span>
						<span class="h-operate">操作</span>
					</p>
					<a href="/html/list.html" class="cart-img" style="display: none;"></a>
					<div class="remove">
						<div class="list-container">
							<ul class="list">
								<script type="text/html" id="li-template">
								{{each products prod}}
								<li class="item">
									<div class="item-content">
										<div class="c-ckbox"><a href="javascript:;" class="ck-btn"></a></div>
										<div class="c-product">
											<a href="/html/detail.html?id={{prod.id}}" class="img"><img src="{{prod.img}}" alt="{{prod.id}}" class="prod-id"></a>
											<div class="p-name center">
												<div class="name-child center-child">
													<p class="cn">{{prod.cn}}</p>
													<p class="en">{{prod.en}}</p>
												</div>
											</div>
										</div>
										<div class="c-attr center">
											<div class="attr-child center-child">
												<p>{{prod.give}}</p>
											</div>
										</div>
										<div class="c-amount">
											<div class="content">
												<a href="javascript:;" class="sub btn"></a>
												<div class="amount-num">
													<input type="text" class="amount-text" value="{{prod.amount}}">
												</div>
												<a href="javascript:;" class="add btn"></a>
											</div>
										</div>
										<div class="c-weight center">
											<div class="weigth-child center-child">
												<p>{{prod.weight}}</p>
											</div>
										</div>
										<div class="c-price center">
											<div class="price-child center-child">
												<p>￥<span class="price-num">{{prod.price}}</span></p>
											</div>
										</div>
										<div class="c-discount center">
											<div class="discount-child center-child"></div>
										</div>
										<div class="c-delete center">
											<div class="delete-child center-child">
												<a href="javascript:;" class="del-btn">删除</a>
											</div>
										</div>
									</div>
								</li>
								{{/each}}
								</script>
							</ul>
						</div>
						<!-- 结算 -->
						<div class="list-footer">
							<div class="footer-container">
								<p>
									<span class="cked-prod"><span>已选</span><span class="checked-num">0</span>件商品<span></span></span>
									<span class="cost-tip">(不包含运费)</span>
								</p>
								<p>
									<span>共</span>
									<span class="dollar">￥</span>
									<span class="money">0.00</span>
								</p>
								<a href="javascript:;" class="settle-btn">结算</a>
							</div>					
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer></footer>
</body>
</html>